<template>
    <div id="index">
        <div id="div1">
            <div id="div11">
                <svg t="1662519086024" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5522" width="65" height="65"
                    style="margin-top:30px;margin-left:50px">
                    <path
                        d="M766.976 1003.52H253.952C126.976 1003.52 23.552 900.096 23.552 773.12V260.096C23.552 133.12 126.976 29.696 253.952 29.696h513.024c126.976 0 230.4 103.424 230.4 230.4v513.024C997.376 900.096 893.952 1003.52 766.976 1003.52zM253.952 121.856c-76.8 0-138.24 62.464-138.24 138.24v513.024C115.712 849.92 178.176 911.36 253.952 911.36h513.024c76.8 0 138.24-62.464 138.24-138.24V260.096c0-76.8-62.464-138.24-138.24-138.24H253.952z"
                        fill="#009F72" p-id="5523"></path>
                    <path
                        d="M432.128 995.328H249.856c-19.456 0-34.816-15.36-34.816-34.816V640c0-19.456 15.36-34.816 34.816-34.816h182.272c19.456 0 34.816 15.36 34.816 34.816v321.536c0 18.432-15.36 33.792-34.816 33.792z"
                        fill="#009F72" p-id="5524"></path>
                    <path
                        d="M660.48 363.52h-83.968c-9.216 0-16.384-7.168-16.384-16.384v-83.968c0-9.216 7.168-16.384 16.384-16.384h83.968c9.216 0 16.384 7.168 16.384 16.384v83.968c0 9.216-7.168 16.384-16.384 16.384zM788.48 363.52h-83.968c-9.216 0-16.384-7.168-16.384-16.384v-83.968c0-9.216 7.168-16.384 16.384-16.384H788.48c9.216 0 16.384 7.168 16.384 16.384v83.968c0 9.216-7.168 16.384-16.384 16.384zM660.48 493.568h-83.968c-9.216 0-16.384-7.168-16.384-16.384v-83.968c0-9.216 7.168-16.384 16.384-16.384h83.968c9.216 0 16.384 7.168 16.384 16.384v83.968c0 9.216-7.168 16.384-16.384 16.384zM788.48 493.568h-83.968c-9.216 0-16.384-7.168-16.384-16.384v-83.968c0-9.216 7.168-16.384 16.384-16.384H788.48c9.216 0 16.384 7.168 16.384 16.384v83.968c0 9.216-7.168 16.384-16.384 16.384z"
                        fill="#EFD152" p-id="5525"></path>
                </svg>
                <div id="div112" class="span">
                    <br>
                    <h2>685</h2>
                    <span>房屋总数</span>
                </div>
            </div>
            <div id="div12">
                <svg t="1662520694726" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="12861" width="65" height="65"
                    style="margin-top:30px;margin-left:50px">
                    <path
                        d="M639.318734 362.471428c0-70.606081-57.443293-128.049375-128.049375-128.049375-70.606081 0-128.049375 57.44227-128.049375 128.049375s57.44227 128.049375 128.049375 128.049375C581.874417 490.51978 639.318734 433.077509 639.318734 362.471428z"
                        p-id="12862" fill="#1afa29"></path>
                    <path
                        d="M829.599452 195.664332c-84.647889-84.647889-197.194174-131.265626-316.904627-131.265626-119.710452 0-232.256738 46.61876-316.90565 131.265626C111.14231 280.313244 64.523549 392.858506 64.523549 512.568958c0 119.709429 46.61876 232.256738 131.265626 316.904627 84.648912 84.649935 197.194174 131.266649 316.90565 131.266649 119.709429 0 232.256738-46.617737 316.904627-131.266649 84.649935-84.647889 131.266649-197.194174 131.266649-316.904627C960.866101 392.858506 914.248364 280.313244 829.599452 195.664332zM732.928738 763.954359c-11.048637 0-20.007683-8.958022-20.007683-20.007683 0-111.192452-90.460268-201.652719-201.652719-201.652719s-201.651696 90.460268-201.651696 201.652719c0 11.048637-8.958022 20.007683-20.007683 20.007683-11.04966 0-20.007683-8.958022-20.007683-20.007683 0-107.004059 69.912279-197.973934 166.45201-229.668797-55.802934-27.762297-94.256734-85.364203-94.256734-151.806451 0-93.447299 76.025511-169.471786 169.471786-169.471786s169.471786 76.025511 169.471786 169.471786c0 66.442248-38.452777 124.045177-94.256734 151.806451 96.53973 31.695886 166.45201 122.664737 166.45201 229.668797C752.936421 754.996336 743.978399 763.954359 732.928738 763.954359z"
                        p-id="12863" fill="#08af9e" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path>
                </svg>
                <div id="div122" class="span">
                    <br>
                    <h2>1028</h2>
                    <span> 住户人数</span>
                </div>
            </div>
            <div id="div13">
                <svg t="1662520912748" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="16752" width="65" height="65"
                    style="margin-top:30px;margin-left:50px">
                    <path
                        d="M711.457728 277.908474c-0.462534-1.418302-1.022283-2.805906-1.682315-4.143367-13.20679-26.825972-24.619724-49.992601-57.027831-49.992601l-276.5485 0c-32.372292 0-43.363623 22.286586-57.276495 50.505277-0.467651 0.945535-0.889253 1.921769-1.260713 2.913353l-42.452881 113.994264c-3.568269 9.587356-2.216481 20.313651 3.619434 28.717042 5.835915 8.403391 15.418154 13.415544 25.65224 13.415544l414.497339 0c9.999748 0 19.393699-4.789073 25.270547-12.876262 5.876847-8.088212 7.523347-18.504446 4.432962-28.010961L711.457728 277.908474zM349.438601 370.852306l26.200732-70.357418c3.360538-6.766101 5.734608-11.270694 7.416923-14.254655l262.857686 0.010233c1.555425 2.765997 3.751441 6.913457 6.837732 13.125949l23.232121 71.475891L349.438601 370.852306z"
                        p-id="16753" fill="#11ac9c"></path>
                    <path
                        d="M431.483198 516.161786c0-17.248849-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.984503 31.233352 31.233352 31.233352 17.248849 0 31.233352-13.984503 31.233352-31.233352L431.483198 516.161786z"
                        p-id="16754" fill="#11ac9c"></path>
                    <path
                        d="M623.200638 484.928435c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.985526 31.233352 31.233352 31.233352s31.233352-13.984503 31.233352-31.233352l0-30.470989C654.43399 498.912937 640.449487 484.928435 623.200638 484.928435z"
                        p-id="16755" fill="#11ac9c"></path>
                    <path
                        d="M593.624019 605.16589c-14.544251-9.302877-33.846876-5.068436-43.149752 9.455349-0.121773 0.198521-13.379729 19.449981-33.968649 19.449981-20.008706 0-32.443923-18.127869-33.276894-19.373233-9.17087-14.422478-28.274974-18.804275-42.829458-9.760295-14.655791 9.104355-19.155269 28.361955-10.04989 43.012629 11.209296 18.047028 41.974997 48.588625 86.157265 48.588625 43.958164 0 75.100442-30.3134 86.573751-48.223305C612.383268 633.785717 608.147804 614.468766 593.624019 605.16589z"
                        p-id="16756" fill="#11ac9c"></path>
                    <path
                        d="M880.201943 406.894174l-67.240427-176.736237c-0.909719-2.684132-1.997494-5.311982-3.242857-7.858992-19.74981-40.328497-49.595558-101.265358-130.002866-101.265358L343.734692 121.033587c-80.391958 0-110.242823 60.926628-130.002866 101.260242-1.245364 2.552126-2.333138 5.179976-3.242857 7.864108l-67.240427 176.741353c-39.992853 25.133424-79.202876 69.203128-79.202876 124.680651L64.045665 787.641851c0 63.946404 52.020794 115.967198 115.967198 115.967198 53.17406 0 98.108458-35.971259 111.732757-84.860736l439.416891-2.033309c12.93766 49.92097 58.370409 86.894046 112.276133 86.894046 63.946404 0 115.972315-52.020794 115.972315-115.967198L959.410959 531.579941C959.409936 476.102419 920.199912 432.032714 880.201943 406.894174zM896.943232 787.641851c0 29.499871-23.9996 53.499471-53.504588 53.499471-29.499871 0-53.499471-23.9996-53.499471-53.499471l0-2.288113c0-8.306176-3.309372-16.272615-9.201569-22.13923-5.851265-5.825682-13.776771-9.094122-22.032806-9.094122-0.046049 0-0.096191 0-0.14224 0 0 0-489.704205 0-493.811756 0-17.248849 0-31.233352 13.985526-31.233352 31.233352l0 1.718131c-0.005117 0.234337-0.005117 0.472767-0.005117 0.711198 0 0.101307 0 0.208754 0.005117 0.304945-0.243547 29.297256-24.152073 53.052287-53.504588 53.052287-29.499871 0-53.499471-23.9996-53.499471-53.499471L126.513392 531.579941c0-30.878265 28.646434-60.393485 57.038064-75.948763 6.517437-3.568269 11.544941-9.343809 14.183024-16.282848l71.368444-187.585329c0.183172-0.483001 0.579191-1.514493 0.73678-2.00261 20.126386-41.080627 34.461883-66.2601 73.894987-66.2601L679.714769 183.500291c39.443337 0 53.779857 25.184589 74.113975 66.803475 0.162706 0.488117 0.335644 0.976234 0.518816 1.459235l71.368444 187.585329c2.638083 6.944156 7.670703 12.71458 14.183024 16.282848 28.39163 15.556301 57.043181 45.071522 57.043181 75.948763L896.942209 787.641851z"
                        p-id="16757" fill="#11ac9c"></path>
                </svg>
                <div id="div132" class="span">
                    <br>
                    <h2>768</h2>
                    <span> 车辆总数</span>
                </div>

            </div>
            <div id="div14">
                <div id="div141">
                    <svg t="1662522624885" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="18246" width="30" height="30"
                        style="margin-left:20px;margin-top:10px; margin-bottom:-5px;">
                        <path
                            d="M371.42016 476.54912H157.94176A106.67008 106.67008 0 0 1 51.2 370.21184V157.5424A106.67008 106.67008 0 0 1 157.94176 51.2h213.4784C430.27456 51.2 481.28 100.09088 481.28 158.72v209.92c0 58.67008-40.76544 107.0592-109.85984 107.90912zM143.31904 102.4a41.0368 41.0368 0 0 0-40.96 40.96v225.34144c0 22.57408 6.87616 61.44 40.96 61.44h245.76c35.36896 0 40.96-38.87616 40.96-61.44V143.36a41.0368 41.0368 0 0 0-40.96-40.96h-245.76z m228.10112 870.4H157.94176A106.6752 106.6752 0 0 1 51.2 866.4576v-212.67456a106.6752 106.6752 0 0 1 106.74176-106.3424h213.4784a106.6752 106.6752 0 0 1 106.74176 106.3424v212.67456A106.6496 106.6496 0 0 1 371.42016 972.8z m-233.22112-378.95168a41.00608 41.00608 0 0 0-40.96 40.96V880.64a41.00608 41.00608 0 0 0 40.96 40.96h245.76a41.00608 41.00608 0 0 0 40.96-40.96v-245.82656a41.00608 41.00608 0 0 0-40.96-40.96h-245.76z m727.86944-117.2992h-213.504a106.67008 106.67008 0 0 1-106.74176-106.33728V157.5424A106.66496 106.66496 0 0 1 652.57984 51.2h213.504A106.67008 106.67008 0 0 1 972.8 157.5424v212.66944a106.64448 106.64448 0 0 1-106.73664 106.33728zM634.92608 97.28a41.00608 41.00608 0 0 0-40.96 40.96v245.82144a41.00608 41.00608 0 0 0 40.96 40.96h245.76a41.00608 41.00608 0 0 0 40.96-40.96V138.24a41.00608 41.00608 0 0 0-40.96-40.96h-245.76z m231.13728 875.52h-213.504a106.6752 106.6752 0 0 1-106.74176-106.3424v-212.67456a106.6752 106.6752 0 0 1 106.74176-106.3424h213.504A106.6752 106.6752 0 0 1 972.8 653.78304v212.67456A106.6496 106.6496 0 0 1 866.06336 972.8z m-231.13728-378.95168a40.96 40.96 0 0 0-40.96 40.96V880.64a40.96 40.96 0 0 0 40.96 40.96h245.76a40.96 40.96 0 0 0 40.96-40.96v-245.82656a40.96 40.96 0 0 0-40.96-40.96h-245.76z m0 0"
                            p-id="18247"></path>
                    </svg>
                    <br>
                    <h4 style="margin-left:3px" class="span">快速导航</h4>
                </div>

                <div id="div143">
                    <div id="div1431">
                        <svg t="1662522901752" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="19268" width="25" height="25"
                            style="margin-top:5px">
                            <path d="M166.2 64.4v895.1h691.7V64.4H166.2z m610.3 813.8h-529V145.8h528.9v732.4z"
                                p-id="19269" fill="#40403d"></path>
                            <path d="M613.7 389.9h81.4V634h-81.4z" p-id="19270" fill="#40403d"></path>
                        </svg>
                        <br>
                        <span class="span">智能门禁</span>
                    </div>
                    <div id="div1432">
                        <svg t="1662523207407" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="20855" width="25" height="25"
                            style="margin-top:5px">
                            <path
                                d="M512 32c206.186667 0 373.333333 167.146667 373.333333 373.333333a372.053333 372.053333 0 0 1-102.912 257.386667L512 988.8 241.6 662.741333A372.053333 372.053333 0 0 1 138.666667 405.333333C138.666667 199.146667 305.813333 32 512 32z m0 746.666667a373.546667 373.546667 0 0 1-103.061333-14.4L512 888.533333l103.082667-124.288A373.546667 373.546667 0 0 1 512 778.666667z m0-682.666667C341.162667 96 202.666667 234.496 202.666667 405.333333S341.162667 714.666667 512 714.666667 821.333333 576.170667 821.333333 405.333333 682.837333 96 512 96z m74.666667 128a138.666667 138.666667 0 1 1 0 277.333333H426.666667v106.666667h-64v-384h224z m0 64H426.666667v149.333333h160a74.666667 74.666667 0 0 0 0-149.333333z"
                                p-id="20856"></path>
                        </svg>
                        <br>
                        <span class="span">智慧停车</span>
                    </div>
                    <div id="div1433">
                        <svg t="1662523321885" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="21826" width="25" height="25"
                            style="margin-top:5px">
                            <path
                                d="M524.461822 379.39282c22.960862 0 41.565331-17.403369 41.565331-38.873356 0-21.467941-18.605492-38.858006-41.565331-38.858006-22.945512 0-40.393597 17.389042-40.393597 38.858006C484.068225 361.989451 501.51631 379.39282 524.461822 379.39282zM192.214455 938.541653l88.888018 0L281.102474 79.319533l-88.888018 0L192.214455 938.541653zM503.324566 212.6901l29.614671 0L532.939238 103.854323l59.245716 41.172725L592.184954 115.920126l-74.044354-51.458999-74.045377 51.458999 0 29.106922 59.230366-41.172725L503.32559 212.6901zM325.547506 775.585257l385.184142 0L710.731648 242.274906 325.547506 242.274906 325.547506 775.585257zM355.177528 271.90269l325.925122 0 0 474.05376L355.177528 745.95645 355.177528 271.90269zM755.175657 79.319533l0 859.222119 88.889042 0L844.064699 79.319533 755.175657 79.319533zM578.411712 392.268058 453.093523 392.268058c0 0-18.2289-2.155083-23.928949 12.96222l0 117.254517c0 0 0.49223 12.006452 13.165374 12.006452 0 0 14.105831 0.072655 14.105831-12.672624l0-70.917166c0 0 7.826566-16.131399 13.671931 0.810459l0.071634 251.465219c0 0-0.491207 12.890588 13.179701 12.890588l14.163138 0.202615c0 0 13.383347-0.146333 13.383347-13.093203L510.905529 586.459852c0 0 0.506557-6.611581 7.623944-6.611581 0 0 6.264937 2.357697 6.264937 6.885827l0 117.529787c0 0 0 11.805884 13.670908 11.805884l13.744589 0c0 0 13.671931-0.809435 13.671931-11.805884L565.881837 450.700889c0 0 4.919234-14.973016 13.671931-0.202615l0.448226 71.843258c0 0-3.182613 12.428054 14.092527 12.428054 12.991404 0 12.587182-11.877515 12.587182-11.877515l0.144292-117.659747C606.824972 405.230278 600.069852 392.268058 578.411712 392.268058zM532.939238 805.170063l-29.614671 0 0 108.834754-59.230366-41.172725 0 29.107945 74.045377 51.457975 74.044354-51.457975 0-29.107945-59.245716 41.172725L532.938214 805.170063z"
                                p-id="21827"></path>
                        </svg>
                        <br>
                        <span class="span">智能梯控</span>
                    </div>
                    <div id="div1434">
                        <svg t="1662523367912" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="22432" width="25" height="25"
                            style="margin-top:5px">
                            <path
                                d="M855.005075 824.39287l-685.615153 0 0-43.932582c71.631434 0 119.638821-260.714883 124.668371-425.031253-0.00921-94.845135 59.170634-182.120874 143.869688-212.648145 2.991124-36.826743 33.70566-65.88864 71.582315-65.88864 38.785352 0 70.310346 31.197536 71.978335 70.176292 84.60184 30.40345 145.828296 115.879194 145.828296 208.765721 3.793396 163.910117 37.638225 424.625 127.689171 424.625L855.006098 824.39287zM232.979192 788.577153 784.450159 788.577153c-84.434018-108.470457-93.813642-389.704676-94.695732-428.259784-0.00921-82.423221-55.56655-159.481248-132.112923-180.849928l-15.271822-5.266957 2.25025-16.21224c0.255827-1.817392 0.573051-5.547343 0.573051-7.435343 0-20.204158-16.551978-37.394678-36.138058-37.394678-20.265556 0-36.138058 15.570627-36.138058 35.509748 0 1.164522 0.211824 2.13871 0.370437 3.232624l2.364861 15.758915-15.183817 5.550413c-75.311243 21.015639-132.103714 99.588159-132.103714 182.76965-0.044002 1.676176-3.66139 117.853152-23.433712 228.509391C287.857057 680.07702 263.770476 751.73813 232.979192 788.577153z"
                                p-id="22433"></path>
                            <path
                                d="M504.351809 947.106726c-55.79577 0-104.408955-35.767622-120.970142-89.005127l34.515095-10.728342c11.822257 38.044478 46.566572 63.59541 86.455047 63.59541 39.711444 0 74.402547-25.409716 86.340437-63.24237l34.461883 10.869558C608.451726 911.532509 559.90915 947.106726 504.351809 947.106726z"
                                p-id="22434"></path>
                        </svg>
                        <br>
                        <span class="span">事件管理</span>
                    </div>
                </div>
            </div>
            <div id="div15">
                <div id="div151">
                    <svg t="1662522624885" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="18246" width="30" height="30"
                        style="margin-left:20px;margin-top:10px; margin-bottom:-5px;">
                        <path
                            d="M371.42016 476.54912H157.94176A106.67008 106.67008 0 0 1 51.2 370.21184V157.5424A106.67008 106.67008 0 0 1 157.94176 51.2h213.4784C430.27456 51.2 481.28 100.09088 481.28 158.72v209.92c0 58.67008-40.76544 107.0592-109.85984 107.90912zM143.31904 102.4a41.0368 41.0368 0 0 0-40.96 40.96v225.34144c0 22.57408 6.87616 61.44 40.96 61.44h245.76c35.36896 0 40.96-38.87616 40.96-61.44V143.36a41.0368 41.0368 0 0 0-40.96-40.96h-245.76z m228.10112 870.4H157.94176A106.6752 106.6752 0 0 1 51.2 866.4576v-212.67456a106.6752 106.6752 0 0 1 106.74176-106.3424h213.4784a106.6752 106.6752 0 0 1 106.74176 106.3424v212.67456A106.6496 106.6496 0 0 1 371.42016 972.8z m-233.22112-378.95168a41.00608 41.00608 0 0 0-40.96 40.96V880.64a41.00608 41.00608 0 0 0 40.96 40.96h245.76a41.00608 41.00608 0 0 0 40.96-40.96v-245.82656a41.00608 41.00608 0 0 0-40.96-40.96h-245.76z m727.86944-117.2992h-213.504a106.67008 106.67008 0 0 1-106.74176-106.33728V157.5424A106.66496 106.66496 0 0 1 652.57984 51.2h213.504A106.67008 106.67008 0 0 1 972.8 157.5424v212.66944a106.64448 106.64448 0 0 1-106.73664 106.33728zM634.92608 97.28a41.00608 41.00608 0 0 0-40.96 40.96v245.82144a41.00608 41.00608 0 0 0 40.96 40.96h245.76a41.00608 41.00608 0 0 0 40.96-40.96V138.24a41.00608 41.00608 0 0 0-40.96-40.96h-245.76z m231.13728 875.52h-213.504a106.6752 106.6752 0 0 1-106.74176-106.3424v-212.67456a106.6752 106.6752 0 0 1 106.74176-106.3424h213.504A106.6752 106.6752 0 0 1 972.8 653.78304v212.67456A106.6496 106.6496 0 0 1 866.06336 972.8z m-231.13728-378.95168a40.96 40.96 0 0 0-40.96 40.96V880.64a40.96 40.96 0 0 0 40.96 40.96h245.76a40.96 40.96 0 0 0 40.96-40.96v-245.82656a40.96 40.96 0 0 0-40.96-40.96h-245.76z m0 0"
                            p-id="18247"></path>
                    </svg>
                    <br>
                    <h4 style="margin-left:3px" class="span">社区公告</h4>
                </div>
                <div id="div152">
                    <img src="../../assets/css/img/img.png" width="200px" height="130px" />
                </div>

                <div id="div153" class="span">
                    <p>&nbsp;&nbsp;<span class="div153">安全防范</span> &nbsp;&nbsp;&nbsp;&nbsp;2022-09-09 18:08</p>

                    <h5>&nbsp;紧急通知！疫情再次反弹，小区需加强管理</h5>

                </div>
            </div>
            <div id="div16">
                <div id="div161">
                    <div id="div1611">
                        <svg t="1662536082176" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="23247" width="30" height="30">
                            <path
                                d="M344.096777 214.526038V54.620157c0-31.984248-11.832175-48.931241-30.064272-53.411186a40.135188 40.135188 0 0 0-49.893789 39.336478v175.895445a40.135188 40.135188 0 0 0 49.893789 38.860324 41.410053 41.410053 0 0 0 30.064272-40.77518z m287.832634 0V54.620157c0-31.984248-11.832175-48.931241-30.059152-53.411186a40.140308 40.140308 0 0 0-49.888669 39.336478v175.895445a40.130068 40.130068 0 0 0 49.893789 38.860324 41.410053 41.410053 0 0 0 30.054032-40.77518z"
                                fill="#30302f" p-id="23248"></path>
                            <path
                                d="M807.824856 80.527039h-143.911197v127.926753c0.02048 38.732326-30.683784 70.506656-69.40587 71.796881h-8.15094c-37.5189-2.851805-66.467026-34.175581-66.364627-71.796881V80.527039H376.081025v127.926753c0.02048 38.732326-30.688904 70.506656-69.40075 71.796881h-8.15606c-37.51378-2.851805-66.467026-34.175581-66.359507-71.796881V80.527039H72.253707c-35.322447 0-63.963376 28.635809-63.963377 63.963377v815.534329c0 35.322447 28.635809 63.963376 63.963377 63.963377h287.832634a43.816423 43.816423 0 0 0 31.984248-12.794724l463.738319-464.526789a54.73213 54.73213 0 0 0 15.989564-38.701606V144.485296c-0.00512-35.322447-28.640929-63.958257-63.973616-63.958257zM489.451796 864.077121H252.311661a41.742849 41.742849 0 0 1-42.536439-36.459074 39.833112 39.833112 0 0 1 39.812633-43.498987h236.986536a41.901567 41.901567 0 0 1 42.695157 36.459074 40.150548 40.150548 0 0 1-39.817752 43.498987z m159.905881-175.900566H252.311661a41.742849 41.742849 0 0 1-42.536439-36.459073 39.833112 39.833112 0 0 1 39.812633-43.498987h396.892418a41.901567 41.901567 0 0 1 42.695157 36.459073 40.150548 40.150548 0 0 1-39.817753 43.498987z m0-175.900565H252.311661a41.732609 41.732609 0 0 1-42.536439-36.459073 39.822872 39.822872 0 0 1 39.812633-43.493867h396.892418a41.901567 41.901567 0 0 1 42.695157 36.459073 40.140308 40.140308 0 0 1-39.817753 43.493867zM632.656442 890.424318l244.686923-244.692043c4.817861-4.822981 9.651082-4.822981 14.468942 0l57.558335 57.553215c4.817861 4.822981 4.817861 9.651082 0 14.474063l-244.692042 244.686923c-4.822981 4.822981-9.645962 4.822981-14.474063 0l-57.548095-57.553215c-4.828101-4.822981-4.828101-9.645962 0-14.468943zM909.793527 611.930449l30.18715-30.18715c3.537877-3.537877 7.085993-3.537877 10.62899 0l62.86259 62.86771c3.542997 3.537877 3.542997 7.085993 0 10.62899l-30.18715 30.18715c-3.542997 3.537877-7.085993 3.537877-10.62899 0l-62.86259-62.86771c-3.542997-3.542997-3.542997-7.085993 0-10.62899zM571.488551 1020.624323a2.401251 2.401251 0 0 0 3.194841 3.041243l101.543716-33.899105a2.396131 2.396131 0 0 0 1.121266-3.998671l-67.803329-67.79821a2.559969 2.559969 0 0 0-4.152269 0.962549l-33.904225 101.692194z"
                                fill="#30302f" p-id="23249"></path>
                        </svg>
                    </div>
                    <div id="div1612">
                        <span>
                            <h3>今日待办</h3>
                        </span>
                    </div>
                </div>
                <div id="div162">
                    <p class="div162"> &nbsp;&nbsp;&nbsp;&nbsp;房屋审核&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0</p>
                    <p class="div162"> &nbsp;&nbsp;&nbsp;&nbsp;住户认证审核&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11</p>
                    <p class="div162"> &nbsp;&nbsp;&nbsp;&nbsp;注册用户实名审核&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12</p>
                    <p class="div162"> &nbsp;&nbsp;&nbsp;&nbsp;待分配工单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5</p>

                </div>

            </div>
        </div>
        <div id="div2">
            <div id="main" ref="chart" style="width: 100%; height: 400px"></div>
        </div>
    </div>
</template>
<script>

import * as echarts from "echarts";   //引用echarts

export default {

    data() {
        return {
            myChart: "",
        };
    },
    mounted() {
        this.init();
        var self = this;
        window.onresize = self.myChart.resize;
        window.addEventListener("resize", function () {
            self.myChart.resize();
        });
    },
    methods: {
        init() {
            this.myChart = echarts.init(this.$refs.chart);
            var option = {
                title: {
                    // text: "堆叠区域图",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                legend: {
                    data: ["住户人流量", "访客人流量", "住户车流量", "访客车流量"],
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        min: 0,
                        max: function (value) {
                            return value.max + 50;
                        },

                    },
                ],
                series: [
                    {
                        name: "住户人流量",
                        type: "line",
                        // stack: "总量",
                        areaStyle: {},
                        data: [120, 132, 101, 134, 90, 110, 86],
                    },
                    {
                        name: "访客人流量",
                        type: "line",
                        // stack: "总量",
                        areaStyle: {},
                        data: [10, 15, 23, 17, 21, 16, 14],
                    },
                    {
                        name: "住户车流量",
                        type: "line",
                        // stack: "总量",
                        areaStyle: {},
                        data: [12, 24, 19, 18, 20, 16, 27],
                    },
                    {
                        name: "访客车流量",
                        type: "line",
                        // stack: "总量",
                        areaStyle: {},
                        data: [9, 14, 13, 25, 19, 24, 18],
                    },

                ],
            };
            this.myChart.setOption(option);
        },
    },
};
</script>
<style>
#index {
    height: 700px;
    position: relative;
    background-color: rgb(244, 247, 247);
}

#div1 {
    height: 300px;
    /* border: 1px solid blue; */
    margin: 10px;

}

#div2 {
    height: 400px;
    background-color: white;
    margin: 10px;
    margin-top: -10px;
}


#div11 {
    position: absolute;
    left: 10px;
    top: 0px;
    width: 305px;
    height: 130px;
    /* border: 1px solid blue; */
    margin: 10px;
    margin-left: 0px;
    background-color: white;
}

#div112 {
    position: absolute;
    right: 20px;
    top: -8px;
    width: 100px;
    height: 130px;
    text-align: center;
    /* border: 1px solid blue; */
}

#div12 {
    position: absolute;
    left: 320px;
    top: 0px;
    width: 280px;
    height: 130px;
    /* border: 1px solid blue; */
    margin: 10px;
    background-color: white;
}

#div122 {
    position: absolute;
    right: 20px;
    top: -8px;
    width: 100px;
    height: 130px;
    text-align: center;
    /* border: 1px solid blue; */
}

#div13 {
    position: absolute;
    left: 610px;
    top: 0px;
    width: 280px;
    height: 130px;
    /* border: 1px solid blue; */
    margin: 10px;
    background-color: white;
}

#div132 {
    position: absolute;
    right: 20px;
    top: -8px;
    width: 100px;
    height: 130px;
    text-align: center;
    /* border: 1px solid blue; */
}

#div14 {
    position: absolute;
    left: 10px;
    top: 140px;
    width: 305px;
    height: 140px;
    /* border: 1px solid blue; */
    margin: 10px;
    margin-left: 0px;
    background-color: white;
}

#div141 {
    position: absolute;
    left: -5px;
    top: 10px;
    width: 70px;
    height: 110px;
    /* border: 1px solid blue; */
    margin: 10px;

}

#div143 {
    position: absolute;
    left: 60px;
    top: 0px;
    width: 220px;
    height: 130px;
    /* border: 1px solid red; */
    margin: 0px;
}

#div143 {
    position: absolute;
    left: 80px;
    top: 0px;
    width: 220px;
    height: 130px;
    /* border: 1px solid red; */
    margin: 0px;
}

#div1431 {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 100px;
    height: 60px;
    /* border: 1px solid rgb(119, 0, 255); */
    margin: 0px;
    text-align: center;
    background-color: rgb(244, 247, 247);

}

#div1432 {
    position: absolute;
    left: 110px;
    top: 5px;
    width: 100px;
    height: 60px;
    /* border: 1px solid rgb(119, 0, 255); */
    margin: 0px;
    text-align: center;
    background-color: rgb(244, 247, 247);
}

#div1433 {
    position: absolute;
    left: 5px;
    top: 70px;
    width: 100px;
    height: 60px;
    /* border: 1px solid rgb(119, 0, 255); */
    margin: 0px;
    text-align: center;
    background-color: rgb(244, 247, 247);
}

#div1434 {
    position: absolute;
    left: 110px;
    top: 70px;
    width: 100px;
    height: 60px;
    /* border: 1px solid rgb(119, 0, 255); */
    margin: 0px;
    text-align: center;
    background-color: rgb(244, 247, 247);
}

#div15 {
    position: absolute;
    left: 320px;
    top: 140px;
    width: 570px;
    height: 140px;
    /* border: 1px solid blue; */
    margin: 10px;
    background-color: white;
}

#div151 {
    position: absolute;
    left: -5px;
    top: 10px;
    width: 70px;
    height: 110px;
    /* border: 1px solid blue; */
    margin: 10px;
}

#div152 {
    position: absolute;
    left: 70px;
    top: -5px;
    width: 70px;
    height: 110px;
    /* border: 1px solid blue; */
    margin: 10px;
}

#div153 {
    position: absolute;
    left: 285px;
    top: 10px;
    width: 270px;
    height: 130px;
    /* border: 1px solid blue;  */
    margin: 10px;
}

.div153 {
    background-color: rgb(176, 235, 236);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
}

#div16 {
    position: absolute;
    left: 900px;
    top: 0px;
    width: 330px;
    height: 280px;
    /* border: 1px solid blue; */
    margin: 10px;
    margin-right: 0px;
    background-color: white;
}

#div161 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 320px;
    height: 50px;
    /* border: 1px solid blue; */
    margin: 0px;
}

#div1611 {
    position: absolute;
    left: 30px;
    top: 10px;
    width: 30px;
    height: 30px;
    /* border: 1px solid blue; */
    margin: 0px;
}

#div1612 {
    position: absolute;
    left: 75px;
    top: -5px;
    width: 200px;
    height: 30px;
    /* border: 1px solid blue; */
    margin: 0px;
}

#div162 {
    position: absolute;
    left: 0px;
    top: 40px;
    width: 320px;
    height: 230px;
    /* border: 1px solid blue; */
    margin: 0px;
}

.div162 {
    background-color: rgb(188, 236, 219);
    width: 270px;
    height: 40px;
    border-radius: 15%;
    margin-left: 30px;
    text-align: left;
    line-height: 40px;
}

.div162:hover {
    color: rgb(103, 247, 158);
    cursor: pointer;
}

.span:hover {
    color: rgb(103, 247, 158);
    cursor: pointer;
}
</style>